<template>
	<view style="padding-bottom: 110rpx;">
		<u-sticky>
			<view class="searchBox">
				<view style="display: flex;"><text class="city">车辆搜索</text></view>

				<view class="search">
					<u--input
						:value="carNo"
						clearable
						border="none"
						fontSize="12"
						placeholder="输入车牌号查询"
						@blur="isSearch = false"
						@focus="isSearch = true"
						@change="searchChange"
					/>
				</view>
			</view>
			<view class="searchBox flex-row-center-sb" style="border: none;">
				<view class="flex-row-center">
					<text class="city" style="margin-right:10rpx;">预定车型</text>
					<u-switch v-model="allModel" activeColor="#5ac725" @change="searchChange2"></u-switch>
					<text class="city" style="margin-left:10rpx;">全部车型</text>
				</view>
			<!-- 	<view class="text-line" style="position: relative;top: 10rpx;" v-if="order.carNo">
					<text style="color: #666;margin-right: 10rpx;">当前排车:</text>
					<text>{{ order.carNo }}</text>
				</view> -->
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="item" v-for="(item, index) in carList" :key="item.carId">
				<view @click="checkedCar(item.carId)">
					<view class="text-line">
						<text class="text-name">车型信息:</text>
						<text class="text-value">{{ item.carInfo | filterNull }}</text>
					</view>
					<view class="text-line">
						<text class="text-name">车牌号:</text>
						<text class="text-value">{{ item.carNo | filterNull }}</text>
					</view>
					<view class="flex-row-center" style="padding: 0 18rpx 10rpx;">
						<text class="text-name">车辆状态:</text>
						<view class="flex-colum">
							<view class="flex-row">
								<text class="text-value" :class="{ tuijian: item.status == 1 }">{{ item.status | carOrderStatus }}</text>

								<text class="text-value" style="color: #1573ff;" v-if="item.orderNo" @click="goOrderDetail(item.orderNo)">
									({{ item.orderNo }})
								</text>
								<text class="text-value" v-if="item.status == 5 || item.status == 6 || item.status == 7">
									({{ item.startTime }}至{{ item.endTime || '--' }})
								</text>
							</view>
						</view>
					</view>

					<view class="text-line">
						<text class="text-name">归属门店:</text>
						<text class="text-value">{{ item.belongingStore | filterNull }}</text>
					</view>
					<view class="text-line">
						<text class="text-name">停靠门店:</text>
						<text class="text-value">{{ item.locatedStore | filterNull }}</text>
					</view>

					<view v-if="item.status > 0 && item.status < 5" style="display: flex;justify-content: flex-end;">
						<text v-if="item.status == 4" class="btn-detail" @click="distribution(item)">强制排车</text>
						<text v-else class="btn-detail" @click="confimChangeCar(item)">确定排车</text>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import * as api from '@/api/order-api.js';
import orderInfo from './component/orderInfo.vue';
export default {
	components: {
		orderInfo
	},
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			orderNo: '',
			order: {},
			carNo: '',
			isSearch: false,
			carList: [],
			checkedCarId: null,
			allModel: false
		};
	},
	onLoad(op) {
		this.orderNo = op.orderNo;
	},

	computed: {
		offsetTop() {
			return uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750) * uni.getSystemInfoSync().windowWidth - 0.5;
		}
	},
	methods: {
		upCallback(page) {
			var param = {
				isOta: false,
				orderNo: this.orderNo,
				carNo: this.carNo,
				pageNum: page.num,
				pageSize: page.size,
				allModel: this.allModel
			};
			api.geCarList(this.toParams(param))
				.then(res => {
					//设置列表数据
					if (page.num == 1) this.carList = []; //如果是第一页需手动制空列表
					this.carList = this.carList.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			this.mescroll.endSuccess();
		},
		//搜索
		searchChange(value) {
			this.carNo = value;
			this.mescroll.triggerDownScroll();
		}, //搜索
		searchChange2() {
			this.checkedCarId = null;
			this.mescroll.triggerDownScroll();
		},
		checkedCar(id) {
			this.checkedCarId = id;
		},
		// 确定换车
		confimChangeCar(item) {
				uni.$emit('changeCar', item);
				uni.navigateBack();
		},

		goOrderDetail(orderNo) {
			let item = {
				orderNo: orderNo
			};
			uni.navigateTo({
				url: './orderDetail?item=' + encodeURIComponent(JSON.stringify(item))
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.searchBox {
	margin: 0 24rpx;
	padding: 24rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
	border-top: 1rpx solid #f5f5f5;

	.city {
		font-size: 28rpx;
		color: #666;
	}

	.search {
		flex: 1;
		padding: 0 20rpx;
		margin: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		height: 60rpx;
		background: #ffffff;
		border-radius: 30rpx;
		border: 1rpx solid #e0e0e0;
	}

	.text-line {
		color: #333;
		font-size: 28rpx;
		padding: 10rpx 0;
	}
}

.tuijian {
	color: #13ce66;
}
.order {
	color: #1573ff;
}

.item {
	display: flex;
	flex-direction: column;
	background-color: white;
	border-radius: 8rpx;
	margin: 10rpx 20rpx;
	padding: 20rpx;
}

.title {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	color: #333;
	margin-left: 20rpx;
}

.text-warn {
	font-size: 24rpx;
	color: red;
	margin-right: 20rpx;
}

.text-warn-orange {
	color: yellow;
}

.flex-item {
	flex: 1;
}

.btn-detail {
	width: 180rpx;
	height: 60rpx;
	border-radius: 50rpx;
	color: white;
	text-align: center;
	background-color: $uni-color-primary;
	font-size: 26rpx;
	line-height: 60rpx;
	margin: 10rpx 20rpx 10rpx;
	align-self: flex-end;
}

.end-time {
	color: #f59a23;

	.type-tag {
		background-color: #f59a23;
		color: white;
		padding: 5rpx;
		font-size: 18rpx;
		margin-right: 10rpx;
	}
}

.start-time {
	color: #e65a6b;

	.type-tag {
		background-color: #e65a6b;
		color: white;
		padding: 5rpx;
		font-size: 18rpx;
		margin-right: 10rpx;
	}
}

/deep/ .u-radio-group--row {
	display: inline !important;
}

/deep/ .u-radio {
	flex-direction: row-reverse !important;
}

.sucess-text {
	color: #13ce66;
	font-size: 12px;
}

.warning-text {
	color: #ffba00;
	font-size: 12px;
}

.danger-text {
	color: #ff4949;
}

.item-title {
	font-size: 28rpx;
	color: #333;
}
.orderInfo {
	margin: 20rpx;
	margin-bottom: 0;
	background-color: #fff;
	border-radius: 16rpx 16rpx 0 0;
	padding: 24rpx;
	box-sizing: border-box;
	.text-line {
		color: #333;
		font-size: 28rpx;
		padding: 10rpx 0;
	}
}
.bottomBtn {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #fff;
	height: 100rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	.btn {
		width: 45%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #fff;
		background-color: #1573ff;
		border-radius: 50rpx;
		font-size: 28rpx;
	}
}
</style>
